/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2019-03-07 20:06:15
 * @LastEditors: kl2018
 * @LastEditTime: 2020-06-23 14:32:09
 */
import { Row, Col } from 'antd';
// import isEmpty from 'lodash/isEmpty';

class Collapse extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			showGroup: props.showGroup ? props.showGroup : false,
			title: props.title ? props.title : '请输入标题',
		};
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.showGroup !== nextProps.showGroup) {
			this.setState({ showGroup: nextProps.showGroup });
		}
	}


	render() {
		const { showGroup, title } = this.state;
		let { customIcon = '', childrenStyle = {} } = this.props;
		childrenStyle = { ...childrenStyle, paddingTop: '10px' };
		return (
			<div className="createWorkPlan-collapse" style={{ padding: '16px 16px 0 16px' }}>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@j0m4qs`}
  className="createWorkPlan-collapse-title"
  style={{
					padding: '0 0 10px 0',
borderBottom: '1px solid #ebebeb',
					color: '#484848',
				}}
				>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qkchw2`} span="14">
						<div style={{ fontSize: '12px', paddingLeft: '10px' }}>{title}</div>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bn2xgk`} span="10" style={{ textAlign: 'right', fontSize: 12 }}>
						{customIcon &&
							customIcon
						}
						<span className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={() => this.setState({ showGroup: !showGroup })} style={{ paddingRight: '10px', color: '#B2B2B2', display: 'inline-block', cursor: 'pointer' }} />
					</Col>
				</Row>
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z52ps7`} className="createWorkPlan-collapse-content" style={showGroup ? childrenStyle : { height: 0, paddingTop: '20px', overflow: 'hidden' }}>
					{this.props.children}
				</Row>
			</div>
		);
	}
}

export default Collapse;
